<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="评价学生"
      :visible="open"
      top="20px"
      width="1100px"
      append-to-body
      @close="cancel()"
    >
      <div style="margin-bottom: 20px">
        <div class="course_info">
          <div class="course_name">课程名称：{{ courseInfo.courseName }}</div>
          <div class="course_name">授课班级：{{ courseInfo.schedulingName }}</div>
          <div class="course_name">
            班级平均成绩: {{ avgScore ? avgScore.toFixed(2) : "" }}
          </div>
        </div>
        <div class="search_tip">
          <div class="search_item">
            <div class="label">学生</div>
            <el-input
              size="small"
              v-model="params.search"
              clearable
              placeholder="请输入学生姓名"
            ></el-input>
          </div>
          <div class="search_item">
            <div class="label">分值范围</div>
            <el-input-number
              size="small"
              :precision="0"
              style="width: 120px !important"
              :min="0"
              placeholder="请输入"
              controls-position="right"
              v-model="params.min"
              clearable
            />
            <div style="margin: 0 5px">至</div>
            <el-input-number
              size="small"
              :precision="0"
              style="width: 120px !important"
              :min="0"
              placeholder="请输入"
              controls-position="right"
              v-model="params.max"
              clearable
            />
          </div>
          <div class="search_item">
            <div class="label">状态</div>
            <el-select v-model="params.status" placeholder="全部" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="未评价" value="0"></el-option>
              <el-option label="已评价" value="1"></el-option>
            </el-select>
          </div>
          <div class="search_item">
            <el-button
              icon="el-icon-search"
              size="small"
              type="primary"
              @click="getList"
              >查询</el-button
            >
            <el-button
              icon="el-icon-refresh"
              style="margin-left: 10px"
              size="small"
              @click="resetQuery"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <el-table
        :data="studentList"
        v-loading="loading"
        height="calc(100vh - 334px)"
      >
        <el-table-column align="center" label="学生（学号）">
          <template slot-scope="scope">
            {{ scope.row.studentName }}({{ scope.row.studentNum }})
          </template>
        </el-table-column>
        <el-table-column align="center" label="综合成绩">
          <!-- 保留两位小数 -->
          <template slot-scope="scope">
            <div>{{ scope.row.score.toFixed(2) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="teacherScore" align="center" label="状态">
          <template slot-scope="scope">
            {{ scope.row.teaEvaluateStatus == 1 ? "已评价" : "未评价" }}
          </template>
        </el-table-column>
        <el-table-column prop="teacherScore" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="getEvaluateInfo(scope.row, scope.$index)"
              >{{
                scope.row.teaEvaluateStatus == 1 ? "查看" : "评价"
              }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="教师评价"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible="diaEvaluateOpen"
      width="640px"
      append-to-body
      @close="cancelEvaluate"
    >
      <el-form
        @submit.native.prevent
        ref="stuEvaluateForm"
        :model="stuEvaluateForm"
        :rules="stuEvaluateRules"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名">
              {{ stuEvaluateForm.studentName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学号">
              {{ stuEvaluateForm.studentNum }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="课程">
              {{ courseInfo.courseName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授课班级">
              {{ courseInfo.schedulingName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="综合成绩">
            {{ rowData.score }}
            <span style="color: #ef7d00; margin-left: 10px">0次补考</span>
            <span @click="routeTurn(rowData)" class="look_info">查看详情</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="综合评价">
            <el-input
              v-model="stuEvaluateForm.levelReason"
              maxlength="100"
              show-word-limit
              :rows="3"
              type="textarea"
              placeholder="请输入评价原因"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button @click="cancelEvaluate">取 消</el-button>
          <el-button v-if="nowIndex > 0" @click="lastPaper" type="primary"
            >上一份</el-button
          >
          <el-button
            v-if="nowIndex < studentList.length - 1"
            @click="nextPaper"
            type="primary"
            >下一份</el-button
          >
          <el-button @click="submitEvaluate(false)" type="primary"
            >确 认</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- :propList="gradeDetail_propList" -->
    <gradeDetail
      :studentId="studentId"
      :courseType="courseType"
      :open.sync="gradeDetail_open"
      :propCourseStuId="gradeDetail_courseStuId"
    ></gradeDetail>
  </div>
</template>

<script>
import {
  getEvaluateStudentList,
  submitEvaluate,
  getEvaluateInfo,
} from "@/api/home";
import gradeDetail from "@/components/gradeDetail";

export default {
  name: "appraiseDialog",
  components: {
    gradeDetail,
  },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    courseInfo: {
      type: [Object],
    },
    avgScore: {
      type: [String, Number],
    },
  },
  data() {
    return {
      courseType: "",
      // 成绩详情
      propList: [],
      gradeDetail_courseStuId: "",
      studentId: "",
      gradeDetail_open: false,
      evaluateList: [
        {
          id: 1,
          value: "优秀",
        },
        {
          id: 2,
          value: "良好",
        },
        {
          id: 3,
          value: "及格",
        },
        {
          id: 4,
          value: "不及格",
        },
      ],
      rowData: {},
      stuLevelText: {
        1: "优秀",
        2: "良好",
        3: "及格",
        4: "不及格",
      },
      nowIndex: "",
      teaEvaluateStatus: null,
      diaEvaluateOpen: false,
      loading: false,
      studentList: [],
      stuEvaluateForm: {
        levelReason: "",
      },
      stuEvaluateRules: {},
      params: {
        search: undefined,
        min: undefined,
        max: undefined,
        status: undefined,
      },
    };
  },
  watch: {
    open(e) {
      if (e) {
        this.getList();
      }
    },
  },
  methods: {
    //上一份
    lastPaper() {
      if (this.nowIndex == 0) {
        this.$modal.msgWarning("已是第一份！");
        return;
      }
      this.submitEvaluate("last");
    },
    //下一份
    nextPaper() {
      if (this.nowIndex == this.studentList.length - 1) {
        this.$modal.msgWarning("已是最后一份！");
        return;
      }
      this.submitEvaluate("next");
    },
    //跳转详情
    routeTurn(row) {
      this.courseType = row.courseType;
      this.gradeDetail_open = true;
      this.gradeDetail_courseStuId = row.courseStuId;
      this.gradeDetail_propList = this.studentList;
      this.studentId = row.studentId;
    },
    //关闭打分弹框
    cancelEvaluate() {
      this.stuEvaluateForm = {
        levelReason: "",
      };
      this.diaEvaluateOpen = false;
    },
    //锚点跳转
    scrollToAnchor(id) {
      const anchor = document.getElementById(id);
      if (anchor) {
        anchor.scrollIntoView({ behavior: "smooth" });
      }
    },
    //保存打分
    async submitEvaluate(type) {
      let params = {
        courseStuId: this.rowData.courseStuId,
        levelReason: this.stuEvaluateForm.levelReason,
      };
      //判断是否是二次打分
      if (this.teaEvaluateStatus == 1) {
        this.$confirm(
          "本次评价会覆盖历史评价内容，是否确认操作？",
          "覆盖确认",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(async () => {
          const loading = this.$loading({
            lock: true,
            text: "正在处理...",
            spinner: "el-icon-loading",
            background: "rgba(255, 255, 255, 0.3)",
          });
          try {
            let res = await submitEvaluate(params);
            if (res.code == 200) {
              this.$modal.msgSuccess("覆盖成功!");
              //判断是否是上一份  或者  下一份 如果是则不需要关闭弹框
              if (!type) {
                this.cancelEvaluate();
              }
              this.getList();
              //切换上一份或者下一份数据
              if (type == "last") {
                this.nowIndex--;
                let row = this.studentList[this.nowIndex];
                this.getEvaluateInfo(row, this.nowIndex, true);
              }
              if (type == "next") {
                this.nowIndex++;
                let row = this.studentList[this.nowIndex];
                this.getEvaluateInfo(row, this.nowIndex, true);
              }
            }
          } catch (e) {
            console.log(e);
          } finally {
            loading.close();
          }
        });
      } else {
        const loading = this.$loading({
          lock: true,
          text: "正在处理...",
          spinner: "el-icon-loading",
          background: "rgba(255, 255, 255, 0.3)",
        });
        console.log(params);
        try {
          let res = await submitEvaluate(params);
          if (res.code == 200) {
            this.$modal.msgSuccess("打分成功!");
            //判断是否是上一份  或者  下一份 如果是则不需要关闭弹框
            if (!type) {
              this.cancelEvaluate();
            }
            this.getList();
            //切换上一份或者下一份数据
            if (type == "last") {
              this.nowIndex--;
              let row = this.studentList[this.nowIndex];
              this.getEvaluateInfo(row, this.nowIndex, true);
            }
            if (type == "next") {
              this.nowIndex++;
              let row = this.studentList[this.nowIndex];
              this.getEvaluateInfo(row, this.nowIndex, true);
            }
          }
        } catch (e) {
          console.log(e);
        } finally {
          loading.close();
        }
      }
    },
    //获取打分详情
    async getEvaluateInfo(row, index, type) {
      this.nowIndex = index;
      this.rowData = row;
      this.teaEvaluateStatus = row.teaEvaluateStatus;
      this.stuEvaluateForm.studentName = row.studentName;
      this.stuEvaluateForm.studentNum = row.studentNum;
      if (!type) {
        this.diaEvaluateOpen = true;
      }
      let res = await getEvaluateInfo(row.courseStuId);
      const { code, data } = res;
      if (code == 200) {
        this.stuEvaluateForm.levelReason = data.levelReason;
      }
    },
    //重置
    resetQuery() {
      this.params = {
        search: undefined,
        min: undefined,
        max: undefined,
        status: undefined,
      };
      this.getList();
    },
    //获取学生列表
    async getList() {
      this.loading = true;
      let params = {
        name: this.params.search,
        minScore: this.params.min,
        maxScore: this.params.max,
        evaluateType: this.params.status,
      };
      let res = await getEvaluateStudentList(
        this.courseInfo.courseSchedulingId,
        params
      );
      if (res.code == 200) {
        this.loading = false;
        this.studentList = res.data;
      }
    },
    //关闭学生弹框
    cancel() {
      this.params = {
        search: undefined,
        min: undefined,
        max: undefined,
        status: undefined,
      };
      this.$emit("update:open", false);
    },
  },
};
</script>

<style scoped lang="scss">
.course_info {
  display: flex;
  align-items: center;
  .course_name {
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    margin-right: 20px;
  }
}
.search_tip {
  display: flex;
  align-items: center;
  margin-top: 20px;
  .search_item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    .label {
      width: 80px;
      color: #333333;
      font-size: 16px;
      font-weight: 500;
      text-align: right;
      margin-right: 10px;
    }
  }
}
.others_text {
  width: 100%;
  .text {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
  }
  .sign {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    color: #ef7d00;
    line-height: 20px;
    margin: 16px 0 10px;
  }
}
.others_content {
  width: 100%;
  height: calc(100vh - 620px);
  overflow: auto;
  &_item {
    width: 100%;
    padding: 16px 32px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #ebebeb;
    margin-bottom: 20px;
    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }
    .param_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .param_item {
        flex: 0.5;
        margin: 10px 0 0;
        display: flex;
      }
    }
  }
}
.look_info {
  color: #2cacff;
  font-size: 14px;
  border-bottom: 1px solid #2cacff;
  cursor: pointer;
  user-select: none;
  margin-left: 10px;
}
</style>
